<template>
  <div class="headerFixedBox">
    <div class="ulBox">
      <div class="logoBoxtop">
        <router-link to="/"><img src="@/assets/shi/logo-2.png" class="logo" /></router-link>
      </div>
      <div class="flexRight">
        <div class="menu_item_box"><a :class="{'nav_active': $route.name=='corporate'}" href="javascript:void(0);" @click="scrollTop">首页</a></div>
        <div class="menu_item_box"><router-link to="/">掌上精选</router-link></div>
        <div class="menu_item_box"><a target="_blank" href="https://www.adzshd.com/asa">ASA智投平台</a></div>
        <div class="menu_item_box"><a target="_blank" href="http://www.xiaohanapp.com/">小涵兼职</a></div>
        <div class="menu_item_box">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-index"
            mode="horizontal"
            text-color="#222"
          >
            <el-submenu
              index="1"
              popper-class="submenu_box"
              :show-timeout="100"
              :hide-timeout="100"
            >
              <template slot="title">关于我们</template>
              <el-menu-item>
                <router-link :to="{ path: 'corporate', query: { tabName: '公司介绍' }}">公司介绍</router-link>
              </el-menu-item>
              <el-menu-item>
                <router-link :to="{ path: 'corporate', query: { tabName: '联系我们' }}">联系我们</router-link>
              </el-menu-item>
              <el-menu-item>
                <router-link :to="{ path: 'corporate', query: { tabName: '服务条款' }}">服务条款</router-link>
              </el-menu-item>
              <el-menu-item>
                <router-link :to="{ path: 'corporate', query: { tabName: '隐私条款' }}">隐私条款</router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <!-- 进入按钮 -->
      <div class="hrightBox">
        <!-- <div class="activity_btn" v-if="is_login" @click="vipActivity">
          <div class="btn" v-if="SVipType == 3" @click="vipActivity">
            <img src="@/assets/shi/svip.png" alt />
            <span>限时会员活动</span>
          </div>
          <div class="btn" v-else-if="SVipType == 1 && SVipLevel == 0" @click="freeGetVip">
            <img src="@/assets/shi/svip.png" alt />
            <span style="font-size:12px;">免费领取SVIP版</span>
          </div>
          <div class="btn" v-else-if="SVipType">
            <i :class="'vip' + SVipLevel" class="vip"></i>
            <span>{{ SVipLevel | filtLevelName }}</span>
          </div>
          
        </div> -->
        <!-- <div class="activity_btn" v-if="is_login" @click="vipActivity">
          <img src="/static/huodong_svip.gif" alt="限时超值活动">
        </div> -->
        <div class="down_app">
          <el-popover placement="bottom" trigger="hover">
            <div class="frame_box">
              <div class="code_img">
                <img src="@/assets/shi/down_ewm.png" alt="">
              </div>
              <p
                style="
                  text-align: center;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 10px;
                "
              >扫码下载APP</p>
            </div>

            <div slot="reference" class="down_app_box">
              <img src="@/assets/shi/mobilePhone.png" alt="">
              <span>下载APP</span>
            </div>
          </el-popover> 
        </div>
        <button class="ml_50" v-if="!is_login" @click="login">登录/注册</button>
        <section class="avatar" v-if="is_login">
          <div class="user_head">
            <img v-if="person_message.photo" :src="person_message.photo" />
            <img v-else src="@/assets/meng/touxiang.png" />
          </div>
          <div v-if="person_message" class="vip_wrap">
            <img
              v-if="person_message && person_message.vipLevel == 0"
              src="@/assets/shi/vip1.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 3"
              src="@/assets/shi/vip2.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 4"
              src="@/assets/shi/vip3.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 1"
              src="@/assets/shi/vip4.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 5"
              src="@/assets/shi/vip4.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 2"
              src="@/assets/shi/vip5.png"
              alt
            />
          </div>
          <!-- 个人信息 -->
          <UserInfoPop :person_message="person_message"/>
        </section>
      </div>
    </div>
  </div>
</template>


<script>
import UserInfoPop from "@/component/UserInfoPop.vue";
export default {
  components: { UserInfoPop },
  data() {
    return {
      SVipType: 0, //是否显示活动弹窗
      SVipLevel: 0,
      is_login: false,
      cancel05: null,
      person_message: null,
      activeIndex:'1'
    };
  },
  created(){
    if (localStorage.getItem('user_id')) {
      this.get_person();
      this.is_login = true;
    } else {
      this.is_login = false;
    }
  },
  methods: {
    scrollTop(){
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    login(){
      this.$store.commit('registerChange', true);
      this.$router.push({path:'/'});
    },
    vipActivity() {
      this.$store.commit('huoDongPopup', true);
    },
    freeGetVip() {
      this.$store.commit('getSvipPopup', true);
    },
    get_person() {
      let vipLevel = localStorage.getItem('vipLevel');
      let photo = localStorage.getItem('photo');
      let nickName = localStorage.getItem('nickName');
      let vipEndTime1 = localStorage.getItem('vipEndTime1');
      this.person_message = {
        vipLevel:vipLevel,
        photo:photo,
        nickName:nickName,
        vipEndTime1:vipEndTime1
      };
    },
    exit() {
      this.is_login = false;
      this.photo = '';
      this.person_message = null;
      this.$clearLocal();
      this.$message({
        message: '退出登录成功！',
        // type: 'success',
        duration: 2000,
        offset: '400'
      });
    },
  },
  filters: {
    filtLevelName(level) {
      let name = '';
      if (level == 0) {
        name = '免费版';
      } else if (level == 1) {
        name = 'SVIP';
      } else if (level == 2) {
        name = 'Plus';
      } else if (level == 3) {
        name = '体验版';
      } else if (level == 4) {
        name = 'VIP';
      }
      return name;
    }
  },
}
</script>

<style lang="less" scoped>
.headerFixedBox {
  // overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 62px;
  font-size: 14px;
  color: #222222;
  background-color: #fff;
  z-index: 99999;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px rgba(0, 0, 0, 0.05),
    0 12px 48px 16px rgba(0, 0, 0, 0.03);
  .ulBox {
    max-width: 1200px;
    height: 62px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logoBoxtop {
      width: 135px;
      margin-top: -3px;
      a{
        display: block;
      }
      .logo {
        width: 88px;
        height: 32px;
        // margin-right: 12px;
      }
    }
    .flexRight{
     display: flex;
     align-items: center;
     flex: 1;
     .menu_item_box{
       font-size: 14px;
       white-space: nowrap;
       &>a{
         display: block;
         padding: 0 20px;
         line-height: 60px;
         color: #222;
         &:hover{
           color: #fd7f2c;
           text-decoration: none;
         }
       }
       .nav_active{
          color: #fd7f2c;
        }
       .el-menu.el-menu--horizontal{
         border-bottom: none;
         &>.el-submenu{
           .el-submenu__title{
             color: #222;
           }
         }
       }
     }
    }
    .hrightBox {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 210px;
      .activity_btn {
        display: flex;
        align-items: center;
        padding-right: 10px;
        box-sizing: border-box;
        cursor: pointer;
        img {
          width: 74px;
          height: 46px;
        }
        .btn {
          display: flex;
          align-items: center;

          font-size: 14px;
          font-weight: 600;
          color: #d0610c;
          span {
            margin-left: 5px;
          }
        }
        .vip {
          width: 32px;
          height: 32px;
          display: inline-block;
          vertical-align: middle;
        }
        .vip0,
        .vip1 {
          background: url('~@/assets/shi/svip.png');
          background-size: cover;
        }
        .vip2 {
          background: url('~@/assets/shi/plus.png');
          background-size: cover;
        }

        .vip3,
        .vip4 {
          background: url('~@/assets/shi/vip.png');
          background-size: cover;
        }
      }
      > button {
        height: fit-content;
        padding: 2px 11px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 14px;
        line-height: 26px;
        color: #ffffff;
        text-align: center;
        white-space: nowrap;
      }
      > button:hover {
        background-color: #ff924b;
      }
      > .avatar:hover {
        > .message {
          display: block !important;
        }
      }
      > .avatar {
        display: flex;
        align-items: center;
        position: relative;
        width: 34px;
        height: 62px;
        margin-left: 40px;
        cursor: pointer;
        .vip_wrap {
          width: 16px;
          height: 12px;
          position: absolute;
          bottom: 13px;
          right: -5px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .message {
          .bg01 {
            background-image: url('~@/assets/meng/novip.png');
            .novip {
              background: #414558;
              width: 244px;
              height: 60px;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
              padding: 20px 15px 0 15px;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              span {
                color: #fff !important;
                font-size: 13px;
                padding-top: 20px;
              }
              > button {
                width: 72px;
                height: 28px;
                line-height: 28px;
                border-radius: 20px;
                background: #fee0c8;
                color: #222;
                margin-top: -4px;
              }
            }
          }
          .bg02 {
            background-image: url('~@/assets/meng/vip.png');
            .vipbox {
              width: 244px;
              height: 60px;
              overflow: hidden;
              background: #414659;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
              display: flex;
              justify-content: space-between;
              padding: 0 15px;
              box-sizing: border-box;
              > div {
                > p {
                  padding-top: 14px;
                  span {
                    font-size: 14px;
                    color: #fff !important;
                  }
                }
                > div {
                  font-size: 12px;
                  color: #b3b4bc;
                  display: flex;
                  > p {
                    width: 66px;
                    overflow: hidden;
                    height: 14px;
                  }
                }
              }
              button {
                width: 72px;
                height: 28px;
                line-height: 28px;
                border-radius: 20px;
                background: #fee0c8;
                color: #222;
                margin-top: 16px;
              }
            }
          }
          > div:first-child {
            > p:first-child {
              font-size: 18px;
              color: #222;
              padding-bottom: 18px;
            }
            > p:last-child {
              > span:nth-child(1) {
                font-size: 12px;
                color: #8e9298;
                line-height: 28px;
              }
              > span:nth-child(2) {
                font-size: 12px;
                line-height: 28px;
                color: #434951;
              }
              // > button:nth-child(3) {
              //   width: 72px;
              //   height: 28px;
              //   border-radius: 4px;
              //   border: solid 1px #555555;
              //   text-align: center;
              //   font-size: 12px;
              //   color: #555555;
              //   line-height: 24px;
              //   background-color: transparent;
              //   float: right;
              // }
            }
            width: 284px;
            //   height: 100px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding-left: 20px;
            padding-top: 26px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          ul {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            background-color: #ffffff;
            li:nth-of-type(1) {
              padding-top: 24px;
            }
            li:last-of-type {
              padding-top: 20px;
              padding-bottom: 20px;
              border-top: 1px solid #e5e5e5;
            }
            li {
              cursor: pointer;
              width: 100%;
              padding: 12px 0;
              padding-left: 18px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #222222;
              img {
                margin-right: 15px;
              }
              .img01 {
                width: 16px;
                height: 16px;
              }
              .img02 {
                width: 16px;
                height: 14px;
              }
              .img03 {
                width: 16px;
                height: 15px;
              }
            }
            li:hover {
              background: #f5f7fa;
            }
          }
          position: absolute;
          top: 62px;
          right: 0px;
          z-index: 99999999;
          width: 284px;
          background-color: #ffffff;
          box-shadow: 0px 0px 20px 0px rgba(181, 181, 181, 0.3);
          border-radius: 6px;
          box-sizing: border-box;
          display: none;
        }
        .user_head {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          overflow: hidden;
          > img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .down_app{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        text-align: right;
        .down_app_box{
          width: 94px;
          height: 34px;
          line-height: 34px;
          border-radius: 4px;
          border: solid 1px #fd7f2c;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          img{
            width: 13px;
            height: 18px;
          }
          span{
            font-size: 14px;
            font-weight: 600;
            color: #fd7f2c;
            margin-left: 6px;
          }
        } 
      }
    }
  }
}
.frame_box{
  // padding: 15px 18px 14px;
  box-sizing: border-box;
  .code_img{
    width: 110px;
    height: 110px;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style lang="less">
.submenu_box .el-menu-item {
  height: initial !important;
  a{
    display: block;
  }
  &.is-active {
    color: #222 !important;
  }
  .navbox {
    padding-bottom: 10px;
  }
}
</style>